<template>
  <div class="game-view">
    <Row>
      <Col span="24">
        <Form ref="formInline" inline>
          <FormItem>
            <Button type="primary" @click="onClickSaveArticleBtn">添加文章</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <Table border :loading="loading" :columns="tbCol" :data="list" size="small">
          <template slot-scope="{ row, index }" slot="content">
            <div v-html="row.content"></div>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="onClickSaveArticleBtn(row)">编辑</Button>
            <Button type="error" size="small" @click="onClickDeleteArticleBtn(row)">删除</Button>
          </template>
        </Table>
      </Col>
    </Row>

    <div class="clear-10"></div>
    <Row>
      <Col span="24">
        <Page :total="total" :page-size="pageSize" show-total @on-change="pageChange"/>
      </Col>
    </Row>

    <Modal
      v-model="saveModel.show"
      :loading="saveModel.loading"
      :title="saveModel.title"
      fullscreen
      @on-cancel="cancelModal"
      @on-ok="saveArticle('articleForm')">
      <Form ref="articleForm" :model="articleForm" :rules="ruleValidate" :label-width="80">
        <FormItem label="标题" prop="title">
          <Input v-model="articleForm.title" style="width: 400px"></Input>
        </FormItem>
        <FormItem label="内容">
          <editor ref="editor" :value="content" @on-change="handleChange"/>
        </FormItem>
      </Form>
    </Modal>

    <Modal
      v-model="delModel.show"
      title="提示"
      class-name="del-modal"
      @on-ok="delArticle">
      <p>确定要删除该文章么?</p>
    </Modal>
  </div>
</template>

<script>
import Editor from '_c/editor'
import Core from 'core/core'

export default {
  components: {
    Editor
  },
  data() {
    return {
      Core: Core,
      loading: true,
      tbCol: [
        {title: 'ID', key: 'id', width: '100px'},
        {title: '标题', key: 'title'},
        {title: '内容', slot: 'content'},
        {title: '操作', slot: 'action', width: 150, align: 'center'}
      ],
      list: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,

      img: [],
      articleForm: {
        id: 0,
        title: ''
      },
      ruleValidate: {
        title: [
          {required: true, message: '标题不能为空', trigger: 'blur'}
        ]
      },
      saveModel: {
        show: false,
        title: '',
        loading: true
      },
      delModel: {
        show: false,
        id: 0
      },
      content: ''
    }
  },
  mounted() {
    this.getArticleList()
  },
  methods: {
    handleChange(html, text) {
      this.content = html;
    },
    getArticleList() {
      this.loading = true
      Core.Api.Article.list({page: this.currentPage})
        .then(res => {
          this.loading = false
          this.list = res.list
          this.total = res.count
        })
    },
    pageChange(page) {
      this.currentPage = page
      this.getArticleList()
    },
    onClickSaveArticleBtn(item) {
      this.saveModel.title = item.id ? '编辑文章' : '添加文章'
      this.articleForm = {
        id: item.id ? item.id : 0,
        title: item.id ? item.title : ''
      }
      this.content = item.id ? item.content : ''
      this.$refs.editor.setHtml(this.content)
      this.saveModel.show = true
    },
    onClickDeleteArticleBtn(item) {
      this.delModel.id = item.id
      this.delModel.show = true
    },
    cancelModal() {
      this.$refs.articleForm.resetFields()
    },
    saveArticle(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let id = this.articleForm.id
          let data = {
            id: this.articleForm.id,
            title: this.articleForm.title,
            content: this.content
          }

          Core.Api.Article.save(data).then(() => {
            this.$Message.success(id ? '修改成功！' : '添加成功！')
            this.getArticleList()
            this.saveModel.show = false
            this.$refs.articleForm.resetFields()
            this.content = ''
          }).catch(err => {
            this.saveModel.loading = false
            setTimeout(() => {
              this.saveModel.loading = true
            })
          })
        } else {
          this.saveModel.loading = false
          setTimeout(() => {
            this.saveModel.loading = true
          })
        }
      })
    },
    delArticle() {
      let data = {
        id: this.delModel.id
      }
      Core.Api.Article.delete(data)
        .then(() => {
          this.$Message.success('删除成功！')
          this.currentPage = 1
          this.getArticleList()
        }).catch(err => {
        this.$Message.error(err.msg)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.game-view {
  .icon {
    height: 140px;
    padding: 10px 16px 10px 0;
  }
}

.demo-upload-list {
  display: inline-block;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
